<template>
  <view class="page-bg-white">
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :down="{auto:false}" @up="upCallback">
      <view class="head">
        <!-- 头部 -->
        <view class="d-flex justify-content-between align-items-center">
          <view class="d-flex align-items-center">
            <u-avatar :src="userInfo.headImgUrl" size="50" v-if="hasLogin && userInfo && userInfo.headImgUrl" />
            <u-avatar v-else src="/static/common/head.png" size="50" />
            <view class="flex-direction-column name-wrap">
              <view class="name" v-if="hasLogin && userInfo">
                {{ userInfo.nickname }}
                <text class="ml-2 text-gray cuIcon-loading" @click="getUserInfo"></text>
                <view class="text-df text-secondary pt-2">{{ userInfo.phone }}</view>
              </view>
              <view class="text-xl" v-else @click="goPage('/pages/user/info',true)">登录/注册</view>
            </view>
          </view>
          <view class="head-right" @click="goPage('/pages/user/info',true)">
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>

        <view class="head-data">
          使用vuex挂载用户数据，每个页面都可以方便的判断登录状态，同时也可以任意扩展
        </view>
      </view>
      <u-gap height="20" bgColor="#f8f8f8"></u-gap>
      <view class="user-wrap">
        <u-cell-group>
          <u-cell size="large" title="意见反馈页" label="演示上传文件" isLink @click="goPage('/pages/user/feedback',true)">
          </u-cell>
          <u-cell size="large" title="外部网页" label="演示打开其他网页" isLink @click="goLink">
          </u-cell>
          <u-cell size="large" title="小程序客服" label="演示打开客服" isLink>
            <view slot="title" class="u-slot-title">
              <button type="none" open-type="contact" class="s-item">
                <text class="s-item-text">在线客服</text>
              </button>
            </view>
          </u-cell>
          <u-cell title="关于我们" @click="goPage('/pages/user/contact')"></u-cell>
        </u-cell-group>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollMixin from '@/components/mescroll/mescroll-uni/mescroll-mixins.js'
  export default {
    mixins: [MescrollMixin],
    components: {},
    data() {
      return {}
    },
    computed: {
      canLoad() {
        return this.hasLogin && this.hasReady
      },
      userInfo() {
        return this.$store.getters.userInfo
      },
    },
    watch: {
      canLoad(val) {
        if (val) {
          //登录成功刷新用户信息
          this.setInfo()
        }
      }
    },
    onShow() {},
    onLoad() {},
    methods: {
      async downCallback() {
        if (this.canLoad) {
          this.setInfo()
        }
        this.mescroll.resetUpScroll()
      },
      upCallback(page) {
        this.mescroll.endSuccess(1, 0)
        this.mescroll.lockUpScroll(true)
      },
      async setInfo() {
        this.$store.dispatch('getUserInfo', true)
      },
      getUserInfo(e) {
        //更新用户资料
        let that = this
        uni.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途
          success: async (res) => {
            // 用户信息
            let info = JSON.parse(res.rawData)
            let nickname = info.nickName
            let headImgUrl = info.avatarUrl
            if (that.$xf.isNotBlank(nickname) && that.$xf.isNotBlank(headImgUrl)) {
              await that.$api.updateMemberInfo({
                nickname: nickname,
                headImgUrl: headImgUrl
              })
            }
          },
          fail: (err) => {
            console.log(err)
          }
        })
      },
      goLink() {
        let info = this.defaultAppInfo;
        if (info.aboutUrl) {
          let url = `/pages/web/link?url=${encodeURIComponent(info.aboutUrl)}`
          this.goPage(url)
        }
      },
    }

  }

</script>

<style lang="scss" scope>
  .head {
    padding: 40rpx 30rpx 0 30rpx;
    background-color: #fff;

    .name-wrap {
      margin-left: 28rpx;

      .name {
        font-size: 38rpx;
        font-family: PingFang SC;
        font-weight: 800;
        color: #000000;
        line-height: 34rpx;
      }

      u-tag {
        margin-top: 14rpx;
      }
    }

    .head-right {
      color: #929292;
      font-weight: $font-weight-medium;
      font-size: 24rpx;
    }

    .head-data {
      margin-top: 30rpx;
      padding-bottom: 30rpx;
    }
  }

</style>
